<!-- 曲线-->
<template>
	<view class="content">
		<view class="content_card">
			<DaDropdown v-model:dropdownMenu="dropdownMenuList" fixedTop :fixedTopValue="0" @confirm="handleConfirm"
				@close="handleClose" @open="handleOpen">
			</DaDropdown>
		</view>
		<view class="content_bottom">
			


			<vue3-echarts v-if="showEcharts" class="echart" ref="mychart" :options="options1" canvasId="echartsLine1"
				@click="handelChart" @showTip="handelShowTip" @hideTip="handelHisTip" @mousemove="handeMousemove">
			</vue3-echarts>
			
			<view class="customTooltips" :style="{left: position[0] + 'px',top: position[1] + 'px'}" v-if="paramsList.length && position.length && showTip">
				<view style="font-size: 22rpx;font-weight: 550;">{{paramsList[0]['axisValue']}}</view>
				<view v-for="(item,index) in paramsList" :key="index">
					<view>
						<text style="font-size: 20rpx;">{{item.seriesName}}:</text>
						<text style="font-size: 21rpx;font-weight: 550;">{{item.value}}</text>
					</view>
				</view>
			</view>


			<view class="nomore" v-if="!showEcharts">
				<view class="imgbox">
					<image style="width: 100%;height: 100%; " src="../../static/chart/nomore.png" mode="" />
				</view>
				<view class="empbox">
					暂无数据
				</view>
			</view>

			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
</template>

<script setup>
	import * as echarts from 'echarts';
	import zRenderEnv from 'zrender/lib/core/env';
	
	import {
		useWebsocket
	} from "@/store/websocket.js";
	const useWeb = useWebsocket()
	import {
		onMounted,
		destroyed,
		nextTick,
		ref,
		reactive,
		watch,
		getCurrentInstance
	} from "vue";

	let {
		proxy
	} = getCurrentInstance();
	import {
		onLoad,
		onShow,
		onUnload
	} from "@dcloudio/uni-app";
	import DaDropdown from '../../components/da-dropdown/index.vue'

	const esdata = reactive({
		dataY: [],
	})
	//计算最大值 
	const calMax = (arr) => {
		let max = 0;
		arr.forEach((el) => {
			if (max < el) {
				max = el;
			}
		})
		let maxint = Math.ceil(max / 9.5); //不让最高的值超过最上面的刻度
		let maxval = maxint * 10; //让显示的刻度是整数
		return maxval;
	}
	const paramsList = ref([])
	const position=ref([])
	const paramsName = ref('')
	const setParms = (params) => {
		paramsList.value = params
		paramsName.value = params[0].axisValueLabel
	}
	// 隐藏top
	const handelHisTip=()=>{
		setTimeout(()=>{
			showTip.value=false
		},500)
	}
	// 显示top
	const handelShowTip=()=>{
		showTip.value=true
	}
	const handeMousemove=(par)=>{
		console.log('77777777',par)
	}
	const showTip=ref(false)
	const estype = ref('line') //bar
	const options1 = reactive({

		tooltip: {
			trigger: 'axis',
			 renderMode: 'richText',
			 position: (point, params, dom, rect, size) => {
			 	// 假设自定义的tooltips尺寸
			 	const box = [170, 170]
			 	// 偏移
			 	const offsetX = point[0] < size.viewSize[0] / 2 ? 20 : -box[0] - 20;
			 	const offsetY = point[1] < size.viewSize[1] / 2 ? 20 : -box[1] - 20;
			 	const x = point[0] + offsetX;
			 	const y = point[1] + offsetY;
			 	
			 	position.value = [x, y]
			 	paramsList.value = params
			 },
			 formatter: (params, ticket, callback) => {
			 	
			 }
		},
		color: [
			"#1890FF",
			"#91CB74",
			"#FAC858",
			"#EE6666",
			"#73C0DE",
			"#3CA272",
			"#FC8452",
			"#9A60B4",
			"#ea7ccc",
			"#CC3299",
			"#99CC32"
		],
		legend: {
			show: false,
			orient: 'horizontal',
			data: [],
			bottom: 0,
		},
		grid: {
			left: '20%',
			right: '10%',
			top: '10%',
			bottom: '10%'
		},
		calculable: true,
		// 控制滚动条的配置项，这个dataZoom组件，默认控制x轴。
		dataZoom: [{
			handleIcon:'path://M50,50 m-15,0 a 15,15 0 1,0 30,0 a 15,15 0 1,0 -30,0 M50,50 m-7.5,0 a 7.5,7.5 0 1,0 15,0 a 7.5,7.5 0 1,0 -15,0',
			type: 'slider',
			handleSize: '80%', // 设置滑块大小，可以根据实际情况调整
			throttle: 50, // 设置触摸的响应时间，单位为ms，可以根据实际情况调整
			start: 0, // 左边在 10% 的位置。
			end: 50, // 右边在 60% 的位置。
			zoomOnMouseWheel: false, // 设置鼠标滚轮可以触发图表缩放
			moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
			moveOnMouseWheel: true,
			orient: 'vertical', // 控制横纵屏的滚动条位置
			left: 'left' ,// 调试滚动条的具体位置
			animation: true,//动画
			showDetail: false,
			
			
			
			
		}],
		xAxis: [{
				type: 'value', //数据
				position: 'top', //x 轴的位置【top bottom】
				nameRotate: -90, //坐标轴名字旋转，角度值。
				axisLabel: {
					//坐标轴刻度标签的相关设置。
					rotate: 90 //刻度标签旋转的角度，
				},
				scale: true //是否是脱离 0 值比例
			}


		],
		yAxis: [{
			type: 'category',
			data: [],
			inverse: 'true', //是否是反向坐标轴。
			axisLabel: {
				rotate: -90
			}
		}],
		series: []
	});



	const dropdownMenuList = reactive([{
			title: '架子选择',
			type: 'cell',
			prop: 'system',
			value: 0,
			showIcon: true,
			options: [],
		},
		{
			title: '类型选择',
			type: 'cell',
			prop: 'type',
			value: 1,
			showIcon: true,
			options: [],
		},
		{
			title: '日期',
			type: 'daterange',
			prop: 'time',
			showQuick: false,
			// 默认选中 2022-01-01到2022-02-01
			value: {
				start: '',
				end: '',
				startTime: '',
				endTime: ''
			},
		},
	])
	const showEcharts = ref(true)


	watch(() => dropdownMenuList[0].value, (newVal, oVal) => {
		getItemType()
	}, {
		deep: true
	})

	const handleConfirm = (v, selectedValue) => {
		if (v.system) {
			dropdownMenuList[0].value = v.system
		}
		if (v.type) {
			dropdownMenuList[1].value = v.type
		}
		if (v.time) {
			dropdownMenuList[2].value.startTime = v.time.startTime
			dropdownMenuList[2].value.endTime = v.time.endTime
			dropdownMenuList[2].value.end = v.time.end
			dropdownMenuList[2].value.start = v.time.start
		}
		if (selectedValue.system && selectedValue.type && selectedValue.time) {
			getChatrs()
		}

	}
	// 设置默认时间
	const setTime = () => {
		let date = new Date()
		let year = date.getFullYear()
		let month = date.getMonth() + 1
		month >= 9 ? month : month = '0' + month
		let day = date.getDate()
		day >= 9 ? day : day = '0' + day
		let hour = date.getHours()
		hour >= 9 ? hour : hour = '0' + hour
		let minute = date.getMinutes()
		minute >= 9 ? minute : minute = '0' + minute
		// 设置开始时间
		dropdownMenuList[2].value.start = `${year}-${month}-${day}`
		dropdownMenuList[2].value.startTime = `00:00`
		// 设置结束时间

		dropdownMenuList[2].value.end = `${year}-${month}-${day}`
		dropdownMenuList[2].value.endTime = `${hour}:${minute}`
		setTimeout(() => {
			getChatrs()
		}, 1000)

	}
	const findMedian = (arr) => {
		// 首先对数组进行排序
		arr.sort((a, b) => a - b);

		// 计算数组长度
		const length = arr.length;

		// 如果数组长度是奇数，直接取中间的元素
		if (length % 2 === 1) {
			return arr[(length - 1) / 2];
		} else { // 如果数组长度是偶数，取中间两个元素的平均值
			const middleIndex = length / 2 - 1;
			return (arr[middleIndex] + arr[middleIndex + 1]) / 2;
		}
	}

	// chart 点击回调
	const handelChart = val => {
		console.log('val', val);
	}
	// 画图
	const getChatrs = async () => {
		let opts = {
			url: proxy.$api.getCharts,
			method: "get",
		};
		let data = {
			tableId: dropdownMenuList[0].value,
			type: dropdownMenuList[1].value,
			pageNumber: 1,
			pageSize: 4500,
			timeInterval: 2,
			startTime: `${dropdownMenuList[2].value.start} ${dropdownMenuList[2].value.startTime}`,
			endTime: `${dropdownMenuList[2].value.end} ${dropdownMenuList[2].value.endTime}`

		};

		showEcharts.value = true
		options1.legend.data = []
		esdata.dataY = []
		const res = await proxy.$request.httpTokenRequest(opts, data)
		if (res.data.code === 200) {
			if (res.data.result.times.length > 0) {
				nextTick(() => {
					const dataYs = []
					options1.yAxis[0].data = res.data.result.times
					res.data.result.series.map((item, index) => {
						options1.legend.data.push(item.name)
						esdata.dataY.push(item.data)
					})

					let maxArray = []
					options1.series = esdata.dataY.map((item, index) => {
						maxArray.push(calMax(esdata.dataY[index]))
						let mod = {
							name: options1.legend.data[index],
							type: estype,
							data: esdata.dataY[index],
							smmoth: true
						}

						return mod
					})

				})
				// setTimeout(() => {
				showEcharts.value = true
				// }, 1000)
			} else {
				showEcharts.value = false
			}
		} else {
			proxy.$refs.uToast.show({
				type: 'error',
				message: res.data.message
			})
		}


	}
	// 获取类型
	const getItemType = () => {
		let opts = {
			url: proxy.$api.getItemType,
			method: "get",
		};
		let data = {
			tableId: dropdownMenuList[0].value
		};
		dropdownMenuList[1].options = []
		proxy.$request.httpTokenRequest(opts, data).then((res) => {
			if (res.data.code === 200) {
				if (res.data.result.length > 0) {

					res.data.result.map((item, index) => {
						dropdownMenuList[1].options.push({
							label: item.name,
							value: item.type
						})
					})
					dropdownMenuList[1].value = dropdownMenuList[1].options[0].value

				}
			} else {
				proxy.$refs.uToast.show({
					type: 'error',
					message: res.data.message
				})
			}
		}).catch((err) => {
			proxy.$refs.uToast.show({
				type: 'error',
				message: err.message
			})
		})
	}
	// 获取架子
	const getListBySystem = () => {
		let opts = {
			url: proxy.$api.getListBySystem,
			method: "get",
		};
		let data = {
			systemNum: useWeb.type

		};

		proxy.$request.httpTokenRequest(opts, data).then((res) => {
			if (res.data.code === 200) {
				if (res.data.result.length > 0) {
					res.data.result.map((item, index) => {
						dropdownMenuList[0].options.push({
							label: item.tableName,
							value: item.tableId
						})
					})
					dropdownMenuList[0].value = dropdownMenuList[0].options[0].value
				}
			} else {
				proxy.$refs.uToast.show({
					type: 'error',
					message: res.data.message
				})
			}
		}).catch((err) => {
			proxy.$refs.uToast.show({
				type: 'error',
				message: err.message
			})
		})
	}


	onMounted(() => {
		nextTick(() => {
			getListBySystem()
			setTime()
		})
		
		zRenderEnv.touchEventsSupported = true;
		zRenderEnv.pointerEventsSupported = false;
		console.log('zRenderEnv',zRenderEnv)
	})

	onShow(() => {



	})
</script>

<style>
	page {
		background-color: #F2F2F2;


	}
</style>
<style>
	.customTooltips {
		position: absolute;
		
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #f2f2f2;
		box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(0, 0, 0, 0.16);
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		transform: rotate(90deg);
		z-index: 10000;
	}
</style>

<style lang="scss" scoped>
	.content {
		padding: 32rpx;
		box-sizing: border-box;

		::v-deep .tp-box {
			background-color: red !important;
			border: none;
			box-shadow: none !important;
			padding: 0 !important;

			>view {
				transform: rotate(90deg) !important;
				transform-origin: top left;
				z-index: 9999999;
				box-shadow: rgb(0 0 0 / 20%) 1px 2px 10px;
				background-color: rgb(255, 255, 255);
				border-width: 1px;
				border-radius: 4px;
				color: rgb(102, 102, 102);
				padding: 10px;
			}
		}

		&_bottom {
			width: 100%;
			height: 85vh;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(0, 0, 0, 0.16);
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			position: relative;
			.echart {
				position: relative;

				.paramsBox {
					text-align: center;
					width: 100%;
					transform: rotate(90deg);
					position: fixed;
					top: 50%;
					right: 0%;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					// justify-content: space-between;

					.itemBox {
						width: 30%;
						display: flex;



						&_item {

							// width: 300rpx;
							font-size: 22rpx;
						}



					}
				}

				.paramsBox:after {
					content: "";
					flex: auto;
				}
			}



			.nomore {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-top: 100rpx;

				.imgbox {
					width: 50%;
					height: 300rpx;
				}
			}
		}
	}
</style>